<template>
  <CellGroup route>
    <Cell v-if="!dbs" style="color: darkred">连接失败，请稍后重试！</Cell>
    <Cell v-for="item in dbs" :title="item.Name" is-link :to="{ path: `/db/${props.dbIndex}/${item.Name}/details`, query: {dbtype: props.dbType} }" />
  </CellGroup>
</template>

<script setup>
  import { ref, inject, onMounted } from 'vue';
  import { CellGroup, Cell } from 'vant';

  const props = defineProps({
    name: String,
    dbIndex: {
      type: [String, Number],
      default: '0',
      required: true
    },
    dbType: {
      type: String,
      default: 'mysql',
      required: false
    }
  });

  const http = inject('$http');
  const dbs = ref([]);

  onMounted(() => {
    http.get(`/api/db/${props.dbIndex}/dbs`).then(response => {
      dbs.value = response.datas;
    });
  });
</script>

<style lang="less" scoped>
  :deep(.van-cell){
    line-height: 1;
    height: 36px;
    font-size: 14px;
    align-items: center;
  }
</style>